<template>
  <view class="contrainer">
    <view class="card">
      <view class="ts-32 tc tb" style="color: #000;">{{detail.demand}}</view>
      <view class="tit">学生信息</view>
      <view class="row">
        <view class="label">姓名</view>
        <view class="value">{{detail.student}}</view>
      </view>
      <view class="row">
        <view class="label">性别</view>
        <view class="value">{{detail.sex}}</view>
      </view>
      <view class="row">
        <view class="label">科目</view>
        <view class="value">{{detail.subject}}</view>
      </view>
      <view class="row">
        <view class="label">年级</view>
        <view class="value">{{detail.grade}}</view>
      </view>
      <view class="row">
        <view class="label">学生基本情况</view>
        <view class="value">{{detail.state}}</view>
      </view>
    </view>

    <view class="card">
      <view class="tit">授课地址</view>
      <view class="row">
        <view class="label">详细地址</view>
        <view class="value">{{detail.addr_text[0]}}{{detail.addr_text[1]}}</view>
      </view>
      <view class="row">
        <view class="label">联系地址</view>
        <view class="value">{{detail.mobile}}</view>
      </view>
    </view>

    <view class="card">
      <view class="tit">首次试课</view>
      <view class="row">
        <view class="label">首次试课时间</view>
        <view class="value">{{detail.learn_date}} {{detail.learn_time}} {{detail.can_discuss==1?'可另议':''}}</view>
      </view>
    </view>

    <view class="card">
      <view class="tit">对老师的要求</view>
      <view class="row">
        <view class="label">老师性别</view>
        <view class="value">{{detail.teacher_sex}}</view>
      </view>
      <view class="row">
        <view class="label">老师类型</view>
        <view class="value">{{detail.teacher_type}}</view>
      </view>
      <view class="row">
        <view class="label">老师要求</view>
        <view class="value">{{detail.demand}}</view>
      </view>
    </view>

    <view class="nav" v-if="detail">
      <view class="but" @tap="showShareCode()">
        <text class="yz-iconfont yz-fenxiang"></text>
        <view>分享</view>
      </view>
      <button class="but" open-type="contact">
        <text class="yz-iconfont yz-xiaoxi"></text>
        <view>咨询</view>
      </button>

      <view class="rightnow" @tap="rightNow" v-if="!detail.applyed">立即抢单</view>
      <view class="rightnow" @tap="refundOrder" v-else>取消接单</view>
      <view class="but" v-if="detail.applyed" @click="$xyfun.to('/pages/user/order/feedback?id='+id)">
        <text class="yz-iconfont yz-caogaoxiang"></text>
        <view>反馈</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      id : '',
      detail : ''
    }
  },
  computed: {
    ...mapState(['common','user'])
  },
  async onLoad(options) {
    if(options?.id){
      this.id = options.id;
    }
    this.loadData();
  },
  methods:{
    async loadData(){
      this.$api.postBase({
        url: 'teacher_job/detail',
        loadingTip: '加载中...',
        data: {
          id : this.id
        },
        success: res => {
          this.detail  = res;
        }
      })
    },
    rightNow(){
      this.$xyfun.to('/pages/job/staff_accept_pay?id='+this.id)
    },
    refundOrder(){
      var that = this;
      uni.showModal({
        title: '提示',
        content: this.common.customConfig.job_teacher_cancel_notice,
        confirmText: '确认',
        success: function (res) {
          if(res.confirm){
            that.$api.postBase({
              url: 'staff_order/cancel_order',
              loadingTip: '加载中...',
              data: {
                id : that.id
              },
              success: res => {
                that.$xyfun.prePage().reloadData();
                that.$xyfun.back();
              }
            })
          }
        }
      });

    },
    //显示分享二维码
    showShareCode(){
      this.showShare = true;
    }
  }
}
</script>

<style lang="scss">
.contrainer{
  background: #f5f5f5;
}
.card{
  background: #fff;
  margin-bottom: 20rpx;
  margin-top: 20rpx;
  padding: 20rpx;
  color: #727272;
  .tit{
    color:#ff8d1b;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    &:before{
      content : '';
      display: inline-block;
      vertical-align: middle;
      margin-right: 20rpx;
      width: 8rpx;
      height: 32rpx;
      border-radius: 2rpx;
      background: #ff8d1b;
    }
  }
  .row{
    display: flex;
    font-size: 26rpx;
    padding: 0 20rpx;
    margin-bottom: 15rpx;
    .label{
      width: 200rpx;
    }
    .value{
      flex-grow: 1;
      width: 1rpx;
    }
  }
}
.nav{
  display: flex;
  justify-content: space-between;
  background: #fff;
  border-top:2rpx solid #c0b7b7;
  padding: 10rpx 20rpx 6rpx 20rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  .but{
    width: 60rpx;
    margin: 0;
    margin-left: 34rpx;
    text-align: center;
    padding: 0;
    line-height: unset;
    background: unset;
    border: none;
    box-shadow: none;
    height: unset;
    &:after{
      display: none;
    }
    text{
      font-size: 50rpx;
    }
    view{
      font-size: 22rpx;
    }
  }
  .rightnow{
    margin-top: 10rpx;
    background: #ef9a38;
    color: #ffffff;
    margin-left: 70rpx;
    margin-bottom: auto;
    padding: 8rpx 0;
    width: 350rpx;
    text-align: center;
    border-radius: 10rpx;
    font-size: 32rpx;
  }
}
</style>
